<template>
	<view class="height-screen">
		<cu-custom isBack bgColor="bg-white">
			<block slot="content">{{$t('filed.orderDetail')}}</block>
		</cu-custom>
		<view class="flex flex-direction margin-ht padding-bottom-lg" style="margin-top: 20rpx;">
			<view class="flex bg-white align-center padding radius-sm">
				<image src="@/static/img/address.png" class="flex-shrink" style="width: 28rpx;height: 31rpx;">
				</image>
				<view class="flex flex-direction margin-left">
					<view class="flex align-center font-400">
						<text style="font-size: 30rpx;color: #222222;">{{info.name}}</text>
						<text style="font-size: 30rpx;color: #222222;" class="margin-left-sm">{{info.phone}}</text>
					</view>
					<text style="font-size: 24rpx;color: #888888;"
						class="font-400 margin-top-sm">{{info.city}}{{info.address}}</text>
				</view>
			</view>
			<view class="bg-white radius-sm flex flex-direction padding margin-top-sm">
				<view class="padding-bottom u-border-bottom flex" style="align-items: baseline;">
					<text class="text-black font-bold text-lg">{{$t('order.shopList')}}</text>
					<text
						class="text-gray font-400 text-sm margin-left-sm">{{info.item.length}}{{$t('order.shopListNum')}}</text>
				</view>
				<view class="grid gap-sm margin-top-sm">
					<view class="flex align-center padding-bottom-sm u-border-bottom"
						v-for="(shopItem,index) in info.item" :key="index">
						<image :src="helper.handleImage(shopItem.image)" style="width: 150rpx;height: 150rpx;"
							class="radius-xs flex-shrink">
						</image>
						<view class="flex flex-direction flex-sub margin-left-sm">
							<text
								class="text-black font-bold text-lg one-line">{{currentLang=='en'?shopItem.en_name:shopItem.zh_name}}</text>
							<text class="text-sm text-gray font-400 margin-tb-sm">x{{shopItem.num}}</text>
							<view class="flex align-center">
								<text class="margin-right-sm text-red text-lg font-bold">${{shopItem.price}}</text>
								<text class="text-gray font-400 text-sm"
									style="text-decoration-line: line-through;">{{$t('order.supermarketPrice')}}:${{shopItem.supermarket_price}}丨{{$t('order.marketPrice')}}:${{shopItem.market_price}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="grid gap margin-top-sm">
					<view class="flex justify-between align-center">
						<text class="font-400 text-df text-gray">{{$t('order.deliveryFee')}}</text>
						<text class="font-400 text-df text-black">${{info.delivery_fee || 0}}</text>
					</view>
					<view class="flex justify-between align-center">
						<text class="font-400 text-df text-gray">{{$t('order.total')}}</text>
						<text class="font-400 text-df text-black">${{info.goods_money}}</text>
					</view>
					<view class="flex justify-between align-center">
						<text class="font-400 text-df text-gray">{{$t('filed.couponMoeny')}}</text>
						<text class="font-400 text-df text-black">{{info.coupon_discount_money}}</text>
					</view>
					<view class="flex justify-between align-center">
						<text class="font-400 text-df text-gray">{{$t('order.payPrice')}}</text>
						<text class="font-400 text-df text-black">${{info.actual_money}}</text>
					</view>
				</view>
			</view>
			<view class="bg-white radius-sm flex flex-direction padding margin-top-sm">
				<text style="font-size: 30rpx;" class="text-black font-bold">{{$t('filed.orderInfo')}}</text>
				<view class="grid gap margin-top-sm">
					<view class="flex justify-between align-center" v-if="info.shouhou_status!=1">
						<text class="font-400 text-df text-gray">{{$t('filed.saleStatus')}}</text>
						<text
							class="font-400 text-df text-black">{{info.shouhou_status==2?$t('filed.yishenqing'):info.shouhou_status==3?$t('filed.yitongguo'):$t('filed.butongguo')}}</text>
					</view>
					<view class="flex justify-between align-center">
						<text class="font-400 text-df text-gray">{{$t('filed.orderNo')}}</text>
						<text class="font-400 text-df text-black">{{info.order_num}}</text>
					</view>
					<view class="flex justify-between align-center">
						<text class="font-400 text-df text-gray">{{$t('filed.createTime')}}</text>
						<text
							class="font-400 text-df text-black">{{info.createtime | handleDateTime('YYYY-MM-DD')}}</text>
					</view>
					<view v-if="info.paytime" class="flex justify-between align-center">
						<text class="font-400 text-df text-gray">{{$t('filed.payTime')}}</text>
						<text class="font-400 text-df text-black">{{info.paytime | handleDateTime('YYYY-MM-DD')}}</text>
					</view>
					<view class="flex justify-between align-center">
						<text class="font-400 text-df text-gray">{{$t('order.payType')}}</text>
						<text class="font-400 text-df text-black">{{info.payment}}</text>
					</view>
					<view v-if="info.pay_order_num" class="flex justify-between align-center">
						<text class="font-400 text-df text-gray">{{$t('filed.payNo')}}</text>
						<text class="font-400 text-df text-black">{{info.pay_order_num}}</text>
					</view>
				</view>
			</view>
			<view class="flex justify-end padding-top" v-if="info.status==1">
				<view class="btnGray setButton" @tap.stop="orderCancel">
					<text class="text-gray text-sm font-400">{{$t('filed.canclePay')}}</text>
				</view>
				<view class="btnSuccess setButton margin-left" @tap.stop="orderPay">
					<text class="text-sm font-400" style="color: #06C168;">{{$t('filed.payShop')}}</text>
				</view>
			</view>
			<view class="flex justify-end padding-top" v-if="info.status==3">
				<view class="btnSuccess setButton" @tap.stop="orderConfirm">
					<text class="text-sm font-400" style="color: #06C168;">{{$t('filed.confirmOrder')}}</text>
				</view>
			</view>
			<view class="flex justify-end padding-top" v-if="info.status==4&&info.shouhou_status==1">
				<view class="btnSuccess setButton" @tap.stop="handleSale">
					<text class="text-sm font-400" style="color: #06C168;">{{$t('filed.addSale')}}</text>
				</view>
			</view>
			<view class="flex justify-end padding-top" v-if="info.status==10">
				<view class="btnSuccess setButton" @tap.stop="shouhouCancel">
					<text class="text-sm font-400" style="color: #06C168;">{{$t('filed.cancleSale')}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		orderInfo,
		orderCancel,
		orderPay,
		orderConfirm,
		shouhouCancel
	} from '@/apis'
	export default {
		data() {
			return {
				order_id: null,
				info: {
					item: []
				},
				currentLang: ''
			}
		},
		onLoad(options) {
			this.order_id = options.id
		},
		onShow() {
			this.orderInfo()
			this.currentLang = uni.getStorageSync('lang')
		},
		methods: {
			handleSale() {
				this.helper.routerNav('/pages/mine/sendSale', {
					order_id: this.order_id
				})
			},
			async orderInfo() {
				const res = await orderInfo({
					order_id: this.order_id
				})
				this.info = res
			},
			async orderCancel() {
				await orderCancel({
					order_id: this.order_id
				})
				this.helper.showToast(this.$t('message.success'))
				await this.helper.delay(1000, () => {
					this.orderInfo()
				})
			},
			async orderConfirm() {
				await orderConfirm({
					order_id: this.order_id
				})
				this.helper.showToast(this.$t('message.success'))
				await this.helper.delay(1000, () => {
					this.orderInfo()
				})
			},
			async shouhouCancel() {
				await shouhouCancel({
					order_id: this.order_id
				})
				this.helper.showToast(this.$t('message.success'))
				await this.helper.delay(1000, () => {
					this.orderInfo()
				})
			},
			async orderPay() {
				await orderPay({
					order_id: this.order_id,
					payment: this.payment
				})
				this.helper.showToast(this.$t('message.success'))
				await this.helper.delay(1000, () => {
					this.orderInfo()
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.btnGray {
		width: 166rpx;
		height: 67rpx;
		background: rgba(136, 136, 136, 0.1);
		border-radius: 34rpx;
	}

	.btnSuccess {
		width: 166rpx;
		height: 67rpx;
		background: rgba(6, 193, 104, 0.1);
		border-radius: 34rpx;
	}
</style>